<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas 圆形进度条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            text-align: center;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500" style="background-color: black;"></canvas>

    <script>
        window.onload = function() {
            let canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d'), //创建二维画布
                centerX = canvas.width /2,
                centerY = canvas.height / 2,
                rad = Math.PI * 2 / 100, // 将360度分成100份，每一份为rad度
                speed = 0.1; // 加载画圆的速度

            // 绘制5像素宽的外圈
            function blueCircle(n) {
                context.save()
                context.strokeStyle = '#fff'; // 设置描边样式
                context.lineWidth = 5; // 设置线宽
                context.beginPath(); // 路径开始
                context.arc(centerX,centerY, 100, -Math.PI / 2, -Math.PI / 2 + n * rad, false)
                context.stroke(); // 绘制
                context.closePath() //结束路径
                context.restore()
            }

            // 绘制白色的外圈
            function whiteCircle() {
                context.save()
                context.beginPath()
                context.lineWidth = 2;
                context.strokeStyle = 'red';
                context.arc(centerX,centerY, 100, 0, Math.PI * 2, false)
                context.stroke() //绘制
                context.closePath() // 结束路径
                context.restore()
            }

            // 绘制百分比文字
            function text(n) {
                context.save() // save 和 restore 可以保证样式属于属性只运用于该段canvas元素
                context.strokeStyle = '#fff';
                context.font = '40px Arial'
                // 绘制字体
                context.strokeText(n.toFixed(0) + '%',centerX - 25,centerY + 10)
                context.stroke()
                context.restore() 
            }
            // 循环画圆
            (function drawFrame() {
                window.requestAnimationFrame(drawFrame)
                context.clearRect(0,0,canvas.width,canvas.height)
                whiteCircle()
                text(speed)
                blueCircle(speed)
                if(speed >100) speed = 0;
                speed += 0.1
            })()
        }
    </script>
</body>
</html>